<script setup lang="ts">
import ThemeSwitch from "@/components/ThemeSwitch/index.vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useLayout } from "@/layout/hooks/useLayout";
import { useNav } from "@/layout/hooks/useNav";
import { debounce } from "@pureadmin/utils";
import { useEventListener } from "@vueuse/core";
import { ref } from "vue";
import Motion from "./utils/motion";

// 导入登录组件
import EmailLogin from "./components/email-login.vue";
import PasswordLogin from "./components/password-login.vue";
import TokenLogin from "./components/totp-login.vue";

defineOptions({
  name: "Login"
});

const loading = ref(false);
const disabled = ref(false);
const loginType = ref("password"); // 登录类型，默认为密码登录

// 登录组件引用
const passwordLoginRef = ref();
const emailLoginRef = ref();
const tokenLoginRef = ref();

const { initStorage } = useLayout();
initStorage();

const { overallStyle, dataThemeChange } = useDataThemeChange();
dataThemeChange(overallStyle.value);
const { title } = useNav();

// 切换登录类型
const switchLoginType = (type: string) => {
  loginType.value = type;
};

// 处理登录成功
const handleLoginSuccess = () => {
  disabled.value = false;
};

// 处理登录错误
const handleLoginError = () => {
  // 可以添加一些错误处理逻辑
};

// 处理键盘Enter事件
const immediateDebounce: any = debounce(
  () => {
    if (loginType.value === "password" && passwordLoginRef.value) {
      passwordLoginRef.value.onLogin(passwordLoginRef.value.ruleFormRef);
    } else if (loginType.value === "email" && emailLoginRef.value) {
      emailLoginRef.value.onEmailLogin(emailLoginRef.value.emailFormRef);
    } else if (loginType.value === "token" && tokenLoginRef.value) {
      tokenLoginRef.value.onTokenLogin(tokenLoginRef.value.tokenFormRef);
    }
  },
  1000,
  true
);

useEventListener(document, "keydown", ({ code }) => {
  if (
    ["Enter", "NumpadEnter"].includes(code) &&
    !disabled.value &&
    !loading.value
  ) {
    immediateDebounce();
  }
});
</script>

<template>
  <div class="login-page">
    <!-- 背景 -->
    <div class="login-bg">
      <div class="login-bg-pattern" />
      <div class="login-bg-gradient" />
    </div>

    <!-- 主题切换 -->
    <div class="theme-switch-container">
      <ThemeSwitch />
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <div class="login-header">
        <Motion>
          <h1>欢迎回来 👋</h1>
          <span class="text-sm text-gray-500">
            请输入您的账户信息以开始管理您的项目
          </span>
        </Motion>
      </div>
      <div class="login-form">
        <!-- 密码登录组件 -->
        <PasswordLogin
          v-if="loginType === 'password'"
          ref="passwordLoginRef"
          v-model:loading="loading"
          :disabled="disabled"
          @login-success="handleLoginSuccess"
          @login-error="handleLoginError"
        />

        <!-- 邮箱验证码登录组件 -->
        <EmailLogin
          v-if="loginType === 'email'"
          ref="emailLoginRef"
          v-model:loading="loading"
          :disabled="disabled"
        />

        <!-- 动态令牌登录组件 -->
        <TokenLogin
          v-if="loginType === 'token'"
          ref="tokenLoginRef"
          v-model:loading="loading"
          :disabled="disabled"
        />

        <Motion :delay="300">
          <el-divider />
        </Motion>

        <Motion :delay="350">
          <div class="login-options">
            <el-button
              v-if="loginType !== 'password'"
              type="primary"
              plain
              @click="switchLoginType('password')"
            >
              账号密码登录
            </el-button>
            <el-button
              v-if="loginType !== 'email'"
              type="primary"
              plain
              @click="switchLoginType('email')"
            >
              邮箱验证码登录
            </el-button>
            <el-button
              v-if="loginType !== 'token'"
              type="primary"
              plain
              @click="switchLoginType('token')"
            >
              动态令牌登录
            </el-button>
          </div>
        </Motion>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--el-bg-color);
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.login-bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--el-color-primary-light-9) 0%,
    var(--el-color-primary-light-7) 100%
  );
  opacity: 0.15;
}

.login-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    var(--el-color-primary-light-3) 2px,
    transparent 2px
  );
  background-size: 30px 30px;
  opacity: 0.3;
  animation: pattern-move 60s linear infinite;
}

@keyframes pattern-move {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 60px;
  }
}

.theme-switch-container {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

.login-card {
  position: relative;
  z-index: 1;
  width: 400px;
  padding: 40px;
  background-color: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 8%);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(
      135deg,
      rgb(255 255 255 / 10%),
      rgb(255 255 255 / 5%)
    );
    border-radius: 12px;
    opacity: 0.5;
  }
}

.login-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.avatar {
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
}

.login-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.login-form {
  width: 100%;
}

.login-options {
  display: flex;
  gap: 8px;
  justify-content: space-around;
  margin-top: 16px;
}

:deep(.el-input) {
  --el-input-height: 44px;

  margin-bottom: 8px;
}

:deep(.el-input__wrapper) {
  border-radius: 6px;
}

:deep(.el-form-item__error) {
  padding-top: 4px;
}

@media (width <= 768px) {
  .login-card {
    width: 90%;
    max-width: 360px;
    padding: 30px 20px;
  }

  .login-options {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
}
</style>
